<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="15rem"
    @onCommit="handleSubmit"
    @onCloesa="closeDlog"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="" prop="name">
                  <el-upload
                    :action="url"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :auto-upload="true"
                    :before-upload="beforeUpload"
                    :headers="{ Authorization: token }"
                    accept=".pdf,.docx,.doc,.xls,.xlsx,.word"
                    :on-success="successa"
                    :on-remove="remove"
                    ref="uploaddemo"
                  >
                    <el-button planType="primary">请选择文件上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { JobticketSave } from '@/api/back'
import { ElMessage } from 'element-plus'
import store from '@/store'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const value = ref('测试2')
var token = store.getters.token
const headers = ref({ token: token })
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  fileName: '',
  fileSize: '',
  fileUrl: '',
  fileId: '',
  type: ''
})
const rules = reactive({
  name: [
    {
      required: true,
      message: '请选择文件！',
      trigger: 'blur'
    }
  ],
  company: [
    {
      required: true,
      message: '所属/编制单位不能为空',
      trigger: 'blur'
    }
  ]
})
const uploaddemo = ref(null)
const tagsLamp = ref([])
const tagsCamera = ref([])
const tagsScreen = ref([])
const url = ref(process.env.VUE_APP_BASE_API + '/file/upload')
const closeDlog = () => {
  form.type = ''
  uploaddemo.value.clearFiles()
  emits('onCloes')
}
const gettie = () => {
  var dataTime = new Date()
}
gettie()
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(Object.assign(props.rowData, form))
    } else {
      return false
    }
  })
}
const save = async (data) => {
  const res = await JobticketSave(data)
  message({ type: 'success', message: '作业票证添加成功!' })
  clearForm()
  form.type = ''
  uploaddemo.value.clearFiles()
  emits('onReload')
}

// const getlamp = async (id) => {
//   const res = await ListId({ id })
//   return res
// }
const beforeUpload = (file) => {
  let size = file.size / 1024 / 1024 < 50
  if (!size) {
    ElMessage({
      showClose: true,
      message: '上传文件不能大于50M！',
      type: 'warning'
    })
  }
  // // 限制文件格式类型
  // console.log('file.size', file.size)
  // const isLt10M = file.size / 1024 / 1024 < 50
  // const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
  // const whiteList = ['doc', 'docx', 'pdf', 'world', 'xlsx']
  // console.log('whiteList.indexOf(fileSuffix)', whiteList.indexOf(fileSuffix))
  // if (whiteList.indexOf(fileSuffix) === -1) {
  //   message({ message: '上传文件只能是 jpg,png格式', type: 'warning' })
  //   return false
  // } else if (!isLt10M) {
  //   message({ type: 'error', message: '上传文件不能超过50MB哦!' })
  //   return false
  // }
  // return true
}
const successa = (res) => {
  if (res.status === 200) {
    form.fileName = res.data.submittedFileName
    form.fileSize = res.data.size
    form.name = res.data.submittedFileName
    form.fileUrl = res.data.url
    form.type = getTypeFile(res.data.ext)
  }
}
const getTypeFile = (data) => {
  if (data === 'xls' || data === 'xlsx') {
    return '表格'
  } else if (data === 'doc' || data === 'docx') {
    return '文档'
  } else if (data === 'pdf') {
    return 'pdf'
  }
}
watch(
  () => props.rowData,
  () => {
    if (props.rowData.planId) {
    } else {
      clearForm()
    }
  }
)

const clearForm = (uploadFile) => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.value = {
    fileName: '',
    fileSize: '',
    fileUrl: '',
    type: '',
    name: ''
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  width: 212px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:deep(.el-upload-list__item-name) {
  width: 212px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upLoad {
  display: flex;
  align-items: center;
}
.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
}
</style>
